<template>
	<div class="swiper" @mousemove="overHd()" @mouseout="outHd()">
		
		<div class="slide" v-for="(item,index) in gallery" :key="item"
		v-show="index==current"
		
		>
			<img :src="item" alt="" width="100%">
		</div>
		<div class="thumb">
			<span @click="current=item-1" 
			v-for="item in gallery.length"
			:key="item"
			:class="{'active':item==current+1}"
			>
				{{item}}
			</span>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			// 传入幻灯片播放时间
			time:{type:Number,default:3000},
			// 传入的幻灯片数据
			gallery:{Type:Array,default(){return []}}
		},
		data(){
			return{
				//定义一个图片数组
				//当前显示第几张幻灯片
				current:0,
				//停止ind
				ind:null
			}
		},
		created(){
			//当组件创建完毕后自动调用
			this.auto()
		},
	methods:{
		auto(){
			// 设置一个定时器，每各3s
			this.ind = setInterval(()=>{
				// 让current++
				this.current++;
				// 如果大于了gallery的长度，current归0
				if(this.current>=this.gallery.length){
					this.current = 0;
				}
			},this.time)
		},
			//鼠标移入事件
			overHd(){
				//停止定时器
				clearInterval(this.ind)
			},
			//鼠标移出
			outHd(){
				//自动播放
				this.auto()
			}
		}
	}
</script>

<style>
	.active{
		color: red;
		background-color: rgba(0,255,255,0.4) !important;
	}
	.thumb span{
		width: 20px;height: 20px;
		display: inline-block;margin-left: 5px;
		border-radius: 50%;
		background-color: #FF7700;
		text-align: center;
		line-height: 20px;
	}
	.swiper{
		position: relative;
	}
	.thumb{
		position: absolute;bottom: 10px;left: 0;right: 0;margin: auto;
	}
</style>
